<template>
   <div>
    <Modal
            v-model="isShowState"
            title="添加用户"
            :mask-closable="false"
            :closable="false"
            @on-ok="ok"
            @on-cancel="cancel">
        <Form :model="formItemadd" :label-width="80">
            <Row>
                <Col span="12">
                    <FormItem label="用户名">
                        <Input v-model="formItemadd.user_name"></Input>
                    </FormItem>
                </Col>
                <Col span="12">
                    <FormItem label="用户类型">
                        <Select v-model="formItemadd.type">
                            <Option value="1">普通管理员</Option>
                            <Option value="2">普通用户</Option>
                        </Select>
                    </FormItem>
                </Col>
            </Row>
            <Row>
                <Col span="12">
                    <FormItem label="真实姓名">
                        <Input v-model="formItemadd.name"></Input>
                    </FormItem>
                </Col>
                <Col span="12"></Col>
            </Row>
            <Row>
                <Col span="12">
                    <FormItem label="密码">
                        <Input v-model="formItemadd.password"></Input>
                    </FormItem>
                </Col>
                <Col span="12">
                    <FormItem label="确认密码">
                        <Input v-model="formItemadd.repass"></Input>
                    </FormItem>
                </Col>
            </Row>
            <Row>
                <Col span="12">
                    <FormItem label="行业">
                        <Input v-model="formItemadd.hangye"></Input>
                    </FormItem>
                </Col>
                <Col span="12">
                    <FormItem label="监控区域">
                        <Select v-model="formItemadd.area">
                            <Option value="1">浑南区</Option>
                            <Option value="2">沈北新区</Option>
                            <Option value="3">铁西区</Option>
                            <Option value="4">皇姑区</Option>
                        </Select>
                    </FormItem>
                </Col>
            </Row>
            <Row>
                <Col span="12">
                    <FormItem label="所属机构">
                        <Input v-model="formItemadd.org"></Input>
                    </FormItem>
                </Col>
                <Col span="12">
                    <FormItem label="职务">
                        <Input v-model="formItemadd.title"></Input>
                    </FormItem>
                </Col>
            </Row>
            <Row>
                <Col span="12">
                    <FormItem label="科室">
                        <Input v-model="formItemadd.office"></Input>
                    </FormItem>
                </Col>
                <Col span="12">
                    <FormItem label="手机号码">
                        <Input v-model="formItemadd.mobile"></Input>
                    </FormItem>
                </Col>
            </Row>
            <Row>
                <Col span="12">
                    <FormItem label="联系地址">
                        <Input v-model="formItemadd.address"></Input>
                    </FormItem>
                </Col>
                <Col span="12">
                    <FormItem label="电话号码">
                        <Input v-model="formItemadd.phone"></Input>
                    </FormItem>
                </Col>
            </Row>
            <Row>
                <Col span="12">
                    <FormItem label="有效开始时间">
                        <DatePicker type="date" v-model="formItem.start_time"></DatePicker>
                    </FormItem>
                </Col>
                <Col span="12">
                    <FormItem label="有效结束时间">
                        <DatePicker type="date" v-model="formItem.end_time"></DatePicker>
                    </FormItem>
                </Col>
            </Row>

        </Form>
        <template>
            <Transfer
                    :titles="roles"
                    :data="data11"
                    :target-keys="targetKeys1"
                    :render-format="render1"
                    @on-change="handleChange1"></Transfer>
        </template>
    </Modal>
   </div>
</template>

<script>
import { muserSave } from '@/api/platform'
export default {
  name: 'AddAndEdit',
  props: {
    isShow: {
      type: Boolean,
      default: () => {
        return false
      }
    }
  },
  mounted () {
  },
  data () {
    return {
      isShowState: this.isShow,
      roles: ['可选角色', '已选角色'],
      data11: this.getMockData(),
      targetKeys1: this.getTargetKeys(),
      formItemadd: {
        roles: [],
        user_name: '',
        type: '',
        name: '',
        password: '',
        newpass: '',
        repass: '',
        hangye: '',
        area: '',
        org: '',
        title: '',
        office: '',
        phone: '',
        address: '',
        mobile: '',
        start_time: '',
        end_time: ''
      },
      formItem: {
        select: '0',
        selectmsg: ''
      }
    }
  },
  methods: {
    ok () {
      this.formItemadd.unit_id = this.$store.state.app.treeSelectData.id
      console.log('数据', this.formItemadd)
      muserSave(this.formItemadd).then(ret => {
        console.log(223311)
        console.log(ret, 111111111)
        console.log(this.treeSelectData.id, '3333')
        this.formItemadd = ret.data.results
        console.log(ret, 'aaaaa')
        this.$emit('result', this.formItemadd)
        this.$emit('cancelShow')
      })
    },
    cancel () {
      this.$Message.info('你点击了取消')
      this.$emit('cancelShow')
    },
    handleChange1 (newTargetKeys, direction, moveKeys) {
      console.log(newTargetKeys)
      console.log(direction)
      console.log(moveKeys)
      this.targetKeys1 = newTargetKeys
    },

    getMockData () {
      let mockData = []
      // let arr = [
      //   { id: '1', sort: '交警县区平台管理权限' },
      //   { id: '2', sort: 'SK监控角色' },
      //   { id: '3', sort: '监控人员角色' },
      //   { id: '4', sort: '超级管理员' },
      //   { id: '5', sort: '演示' }
      // ]
      for (let i = 1; i <= 20; i++) {
        mockData.push({
          key: i.toString(),
          label: 'Content ' + i,
          description: 'The desc of content  ' + i,
          disabled: Math.random() * 3 < 1
        })
      }
      return mockData
    },
    getTargetKeys () {
      return this.getMockData()
        .filter(() => Math.random() * 2 > 1)
        .map(item => item.key)
    },
    render1 (item) {
      return item.label
    }
  }
}
</script>

<style scoped>

</style>
